<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>mixins 混入选项</title>
	</head>
	<body>
		<div id="app">
			<h2>mixins 混入选项</h2><hr />
			<p>{{num}}</p>
			<p><button @click="add">add</button></p>
			<hr />
			<strong style="color: red; line-height: 30px;">当项目完成后，又修改需求后，可用混入，不污染构造器整体<br />混入可以写在构造器内部或者外部，分为局部混入、全局混入<br />加载顺序：全局混入 > 局部混入 > 原声混入</strong>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			//当项目局部增加需求时，可采用局部混入
			var mixinDemo = {
				updated:function() {
					console.log('我是局部混入1，当前的num' + this.num)
				}
			};
			var mixinDemo1 = {
				updated:function() {
					console.log('我是局部混入2，当前的num' + this.num)
				}
			};
			//项目要调用的公共方法，可采用全局混入
			Vue.mixin({
				updated:function() {
					console.log('我是全局混入')
				}
			})
			var vm = new Vue({
				el:'#app',
				data:{
					num: 1,
				},
				methods:{
					add:function() {
						return this.num++;
					}
				},
				mixins:[ mixinDemo, mixinDemo1],
				updated:function() {
					console.log('我是原生混入');
				}
			})
		</script>
	</body>
</html>
